<template>
	<view class="page">
		<view class="group_3">
			<view class="" style="margin: 20rpx 0 0 20rpx;">
				基本信息
			</view>
			<text lines="1" class="text_8">培训类型 </text>
			<view class="item">
				<input type="text" placeholder="请选择培训类型 " disabled v-model="userInfo.occupation_relation"
					class="atinput" @click="showoccupation = true" />
			</view>
			<u-picker :show="showoccupation" :columns="occupation_status" keyName="label" @confirm="addoccupation"
				@cancel="showoccupation = false">
			</u-picker>

			<text lines="1" class="text_8">课程名称</text>
			<view class="item">
				<input type="text" placeholder=" 请输入课程名称" class="atinput" />
			</view>

			<text lines="1" class="text_8">课程图片(非必填，第一张图为封面图)</text>
			<view class="" style="margin-top: 40rpx;margin-left: 20rpx;">
				<u-upload :fileList="fileList1" name="1" width="150rpx" height="150rpx" @afterRead="afterRead"
					@delete="deletePic" multiple :maxCount="4" />
			</view>
			<text lines="1" class="text_8">建议尺寸: 750x750px, 最多可上传5张图片</text>

			<text lines="1" class="text_8">课程类型 </text>
			<view class="item">
				<view style="margin-top: 36rpx;">
					<u-radio-group v-model="userInfo.timescount" @change="timeChange">
						<u-radio label="计次" :name="1" activeColor="#ec652b" />
						<u-radio label="计时" :name="2" customStyle="margin-left: 60rpx;" activeColor="#ec652b"/>
					</u-radio-group>
				</view>
			</view>

			<text lines="1" class="text_8">有效期设置</text>
			<view class="item">
				<view style="margin-top: 36rpx;">
					<u-radio-group v-model="userInfo.datacount" @change="dataChange">
						<u-radio label="天数" :name="1" activeColor="#ec652b"/>
						<u-radio label="日期区间" :name="2" customStyle="margin-left: 60rpx;" activeColor="#ec652b"/>
					</u-radio-group>
				</view>
			</view>

			<!-- 计次/天数 -->
			<view class="" v-if="userInfo.timescount == 1 && userInfo.datacount == 1">
				<view class="item">
					<view>
						<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
					</view>
				</view>
				<view class="text_18">天 </view>
				<view class="text_8">课次数</view>
				<view class="item">
					<view>
						<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
					</view>
				</view>
				<text lines="1" class="text_8">最多赠送课次</text>
				<view class="item">
					<view>
						<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
					</view>
				</view>
			</view>
			<!-- 计次/日期区间 -->
			<view class="" v-if="userInfo.timescount == 1 && userInfo.datacount == 2">
				<view class="item">
					<view>
						<input type="text" placeholder="请选择日期范围" disabled v-model="userInfo.data_time" class="atinput"
							@click="datashow = true" />
					</view>
				</view>
				<text lines="1" class="text_8">课次数</text>
				<view class="item">
					<view>
						<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
					</view>
				</view>
				<text lines="1" class="text_8">最多赠送课次</text>
				<view class="item">
					<view>
						<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
					</view>
				</view>
			</view>

			<!-- 计时/天数 -->
			<view class="" v-if="userInfo.timescount == 2 && userInfo.datacount == 1">
				<view class="item">
					<view>
						<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
					</view>
				</view>
				<view class="text_18">天 </view>
			</view>

			<!-- 计时/日期区间 -->
			<view class="" v-if="userInfo.timescount == 2 && userInfo.datacount == 2">
				<view class="item">
					<view>
						<input type="text" placeholder="请选择日期范围" disabled v-model="userInfo.data_time" class="atinput"
							@click="datashow = true" />
					</view>
				</view>
			</view>
		</view>
		<view class="group_3">
			<view class="" style="margin: 20rpx 0 0 20rpx;">
				价格与库存设置
			</view>
			<text lines="1" class="text_8">报名价格(元)</text>
			<view class="item">
				<view>
					<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
				</view>
			</view>
			<text lines="1" class="text_8">最低销售价格(元)</text>
			<view class="item">
				<view>
					<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
				</view>
			</view>
			<text lines="1" class="text_8">库存数量</text>
			<view class="item">
				<view>
					<u-number-box v-model="value" @change="valChange" inputWidth='250px'></u-number-box>
				</view>
			</view>
		</view>

		<view class="group_3">
			<view class="" style="margin: 20rpx 0 0 20rpx;">
				价格与库存设置
			</view>
			<text lines="1" class="text_8">周历限制</text>
			<view class="item">
				<view class="d-flex flex-row flex-wrap">
					<!-- <u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
						<u-checkbox :customStyle="{marginRight: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :value="item.id">
						</u-checkbox>
					</u-checkbox-group> -->
					<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
						<view class="" class="d-flex flex-row flex-wrap" style="width: 600rpx;">
							<view v-for="item in checkboxList1" :key="item.id" class="item d-flex flex-row"
								style="width: 200rpx;">
								<checkbox color="#2f75fa" :value="item.id" :checked="item.checked"
									style="transform:scale(0.7)" />
								<view style="width: 100rpx;">{{ item.name }}</view>
							</view>
						</view>
					</u-checkbox-group>
				</view>
			</view>
			<text lines="1" class="text_8">时段限制</text>
			<view class="item">
				<view class="item-title">预约日程</view>
				<view class="flex-space-between time-cell">
					<view class="time" @click="openDateAlert(0)">
						{{formData.startDate ? filterDate(formData.startDate) : '请选择' }}
					</view>
					<view>至</view>
					<view class="time" @click="openDateAlert(1)">
						{{formData.endDate ? filterDate(formData.endDate) : '请选择' }}
					</view>
				</view>
			</view>
			<text lines="1" class="text_8">使用次数限制</text>
			<view class="item">
				<view class="d-flex flex-row justify-space-around">
					<view class="d-flex flex-column">
						<view class="" style="font-size: 24rpx;color: rgba(136, 136, 136, 1);">
							每日使用次数
						</view>
						<view class="" style="margin-top: 10rpx;">
							<u-number-box v-model="value" @change="valChange" inputWidth='80px'></u-number-box>
						</view>
					</view>
					<view class="d-flex flex-column">
						<view class="" style="font-size: 24rpx;color: rgba(136, 136, 136, 1);">
							每周使用次数
						</view>
						<view class="" style="margin-top: 10rpx;">
							<u-number-box v-model="value" @change="valChange" inputWidth='80px'></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="group_3">
			<view class="" style="margin: 20rpx 0 0 20rpx;">
				课程详情
			</view>
			<text lines="1" class="text_8">报名须知</text>
			<view class="item">
				<u-textarea v-model="value2" placeholder="请输入内容" maxlength='-1'></u-textarea>
			</view>
			<text lines="1" class="text_8">课程简介</text>
			<view class="item">
				<u-textarea v-model="value2" placeholder="请输入内容" maxlength='-1'></u-textarea>
			</view>
		</view>

		<view class="" style="width: 100%;height: 10vh;"></view>
		
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class=""
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ec652b;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ec652b 1rpx solid">
				保存草稿
			</view>
			<view class="" @click="addculum"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				提交创建
			</view>
		</view>
		
		<!-- <button bindtap="onClick" class="button_3" @click="baocun">
			保存
		</button> -->
		<!-- <view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 3%;z-index: 99;">
			<view class="d-flex flex-column justify-start">
				<view class="" style="font-size: 25rpx;">
					总价：<text style="font-size: 30rpx; color: red;">¥1299</text>
				</view>
				<view class="" style="font-size: 22rpx;">
					最低销售价：¥999
				</view>
			</view>
			<view class="d-flex flex-row ">
				<view class="" @click="baocun"
					style="width: 150rpx;height: 60rpx;background: #ffffff;color: #63b4ff;font-size: 24rpx;text-align: center;line-height: 60rpx;border:#63b4ff 1rpx solid;border-radius: 8rpx;margin-right: 20rpx;">
					保存草稿
				</view>
				<view class="" @click="addculum"
					style="width: 150rpx;height: 60rpx;background: #63b4ff;color: #ffffff;font-size: 24rpx;text-align: center;line-height: 60rpx;border-radius: 8rpx;">
					提交创建
				</view>
			</view>
		</view> -->
		<u-calendar :show="datashow" :mode="mode" @confirm="confirmdata" @close="datashow = false"></u-calendar>
		<!-- 年月日时间弹框 -->
		<van-popup :show="showDate" round position="bottom" @close="showDate = false">
			<van-datetime-picker type="date" :value="new Date().getTime()" @cancel="showDate = false"
				@confirm="configDate" />
		</van-popup>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import {
		formatDate
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				fileList1: [],
				url_phone: '',
				fileList: [], //图片列表
				show: false,
				value1: Number(new Date()),
				showoccupation: false, //职业
				occupation_status: [], //职业
				occupation_list: [{
						id: 1,
						label: "游泳私教初级课程"
					},
					{
						id: 2,
						label: "篮球长训高级课程"
					},
				],
				userInfo: {
					occupation_relation: '',
					occupation_relation_id: '',
					occupation_jineng: '',
					occupation_jineng_id: '',
					occupation_changguan: "",
					occupation_changguan_id: "",
					occupation_xcx: '',
					occupation_xcx_id: '',
					timescount: 1,
					datacount: 1,
					data_time: ''
				},
				value: 0,
				datashow: false,
				mode: 'range',
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '周一',
						id: 1,
						disabled: false
					},
					{
						name: '周二',
						id: 2,
						disabled: false
					},
					{
						name: '周三',
						id: 3,
						disabled: false
					},
					{
						name: '周四',
						id: 4,
						disabled: false
					},
					{
						name: '周五',
						id: 5,
						disabled: false
					},
					{
						name: '周六',
						id: 6,
						disabled: false
					},
					{
						name: '周日',
						id: 7,
						disabled: false
					}
				],
				weekSelect: [], //选中的
				formData: {
					className: '', //私教课程名称
					classItem: '', //课节,
					startDate: '', //预约日期开始
					endDate: '', //预约日期结束
				},
				dateState: 0, //0是选择开始日期，1是结束日期
				showDate: false, //年月日弹窗
				value2: ''
			}
		},
		computed: {
			//修改时间格式
			filterDate() {
				return (value) => {
					return formatDate(parseInt(value), 'YYYY/MM/DD')
				}
			}
		},
		onLoad() {
			this.shuju()
		},
		methods: {
			//打开年月日
			openDateAlert(index) {
				this.dateState = index
				this.showDate = true
			},
			//选中年月日
			configDate(event) {
				// let time = formatDate(event.detail,'YYYY/MM/DD hh:mm:ss')
				if (this.dateState === 0) {
					this.formData.startDate = event.detail
				} else {
					this.formData.endDate = event.detail
				}
				this.showDate = false
			},
			checkboxChange(n) {
			},
			confirmdata(e) {
				const dateArray = e;
				const firstDate = dateArray[0]; // 获取第一个日期
				const lastDate = dateArray[dateArray.length - 1]; // 获取最后一个日期
				const rangeArray = [firstDate, lastDate];
				this.userInfo.data_time = rangeArray
				this.datashow = false
			},
			baocun() {
				// uni.navigateTo({
				// 	url: '../../page_admin/coach-side/class-home/class-sub/class-add'
				// })
			},
			valChange(e) {
			},
			shuju() {
				this.occupation_status.push(
					this.occupation_list
				)
			},
			// 职业
			addoccupation(e) {
				this.userInfo.occupation_relation = e.value[0].label
				this.userInfo.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},

			timeChange(n) {
				this.userInfo.timescount = n
			},
			dataChange(n) {
				this.userInfo.datacount = n
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		// height: 100vh;
		background-color: #EDF5F5;
		position: relative;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.000000);
			width: 710rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;
			border-radius: 20rpx;

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 600rpx;
					padding-left: 20rpx;
				}

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.text_18 {
			width: 95rpx;
			height: 45rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 5rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}
	}
</style>